/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-10 20:41:17
 * @Description:
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  PixelRatio,
} from 'react-native';
import {
  iconLoopGray,
  empty06,
  empty11,
} from '@/images';
import { Button, msg, XMEmpty } from '@/common';
import {
  px2dp,
  fontColorDeepGray,
  mainBgColorWhite,
} from '@/styles';
import api from '@/api';

const { Submit } = Button;

export default class DriverOutline extends React.PureComponent {
  render() {
    const { driverState, carState, } = this.props;
    console.log('🚀🚀🚀wimi======>>>driverState,carState', driverState, carState);
    return (
      <View style={styles.emptyWrap}>
        <View style={styles.headerStatus}>
          <Image
            source={iconLoopGray}
            resizeMode='contain'
            style={styles.loopImg}
          />
          <Text style={styles.headerStatusText}>请假中</Text>
        </View>

        <XMEmpty
          emptyImg={this._renderStatusImg()}
          desc={this._renderStatusText()}
          boxStyle={{ marginTop: px2dp(40) }}
        />
        <View style={styles.btnWrap}>
          <Submit
            text='取消请假'
            boxStyle={{
              width: px2dp(590),
              height: px2dp(88),
              borderRadius: px2dp(44),
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(32),
            }}
            onClick={() => { this.submit(); }}
          />
        </View>
      </View>

    );
  }

  _renderStatusImg =() => {
    const { driverState, carState, } = this.props;
    if (carState === 2) {
      return empty06;
    }
    if (driverState === 2) {
      return empty11;
    }
  }

  _renderStatusText =() => {
    const { driverState, carState, } = this.props;
    if (carState === 2) {
      return '您的车辆正在维修保养，暂停接单';
    }
    if (driverState === 2) {
      return '您已选择请假，暂停接单';
    }
  }

  // 提交
  submit = () => {
    const { driverState, carState, } = this.props;
    let type = null;
    if (carState === 2) {
      type = 1;
    }
    if (driverState === 2) {
      type = 2;
    }
    let params = {
      type,
      state: 1, // 1销假 2请假
      remark: '',
      pics: []
    };
    api.supply.updateDriverState(params).then((res) => {
      msg.emit('router: refreshRoute', {
        routeName: 'DriverTab',
      });
      if (!res.success) {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };
}

const styles = StyleSheet.create({
  emptyWrap: {
    width: px2dp(702),
    height: px2dp(668),
    backgroundColor: mainBgColorWhite,
    marginHorizontal: px2dp(24),
    marginVertical: px2dp(24),
    borderRadius: px2dp(16),
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(32),
  },
  loopImg: {
    width: px2dp(36),
    height: px2dp(36),
  },
  headerStatus: {
    width: px2dp(168),
    height: px2dp(60),
    flexDirection: 'row',
    borderWidth: 1 / PixelRatio.get(),
    borderRadius: px2dp(30),
    borderColor: fontColorDeepGray,
    backgroundColor: '#F8F8F8',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: px2dp(20),
  },
  headerStatusText: {
    fontSize: px2dp(26),
  },
  btnWrap: {
    alignItems: 'center',
    marginTop: px2dp(62)
  }
});
